<template>
  <div class="bar">
    <div class="right">
      <div class="tip">{{ plugin.t('content') }}</div>
    </div>
    <div class="title">{{ plugin.t('name') }}</div>
  </div>
  <div class="plugin-fiskaly">
    <div class="box">
      <div class="left-box" style="width: 270px">
        <t-menu class="menu" theme="light" v-model="menu" width="250px">
          <t-menu-item :value="0">
            <template #icon>
              <t-icon name="desktop" />
            </template>
            {{ plugin.t('tabs.0') }}
          </t-menu-item>
          <t-menu-item :value="1">
            <template #icon>
              <t-icon name="cloud-upload" />
            </template>
            {{ plugin.t('tabs.1') }}
          </t-menu-item>
          <t-menu-item :value="2">
            <template #icon>
              <t-icon name="setting" />
            </template>
            {{ plugin.t('tabs.2') }}
          </t-menu-item>
        </t-menu>
      </div>
      <div class="box">
        <Ticket v-if="menu == 0" />
        <Order v-if="menu == 1" />
        <Config v-if="menu == 2" />
      </div>
    </div>
  </div>
</template>
<script setup>
  import { ref } from 'vue'
  import index from '../index'
  import Config from './config/index.vue'
  import Order from './order/index.vue'
  import Ticket from './ticket/index.vue'

  const plugin = index.plugin
  const menu = ref(0)

</script>
<style lang="scss">
  .plugin-fiskaly{
    .menu{
      background: 0;
      .t-default-menu__inner .t-menu{
        padding: 0
      }
      .t-menu__item.t-is-active:not(.t-is-opened){
        background-color: var(--td-brand-color-2)
      }
    }

    .title{
      font-size: 16px;
      font-weight: bold; 
      padding-bottom: 20px;
    }
  }
</style>